<template>
  <div class="start-page">
    <el-main>
        <div class="start-top">
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    手机启动页<i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    
                    <el-dropdown-item>
                        <router-link :to="{ name: 'ControlStart' }" tag="li">中控启动页</router-link>
                    </el-dropdown-item>
                    
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="addStartPage">
          <el-button style="background: #4065E0; color: #fff" @click="addStartPage">+ 添加启动页</el-button>
      </div>
      <div class="top">
          <div class="item">
            <el-input v-model="keyWord" placeholder="请输入关键字" prefix-icon="el-icon-search"></el-input>
          </div>
          <div class="item">
            <span>状态:</span>
            <el-select class="state" v-model="isActive" style="width: 100px;">
                <el-option label="启用" value="1"> </el-option>
                <el-option label="不启用" value="0"> </el-option>
            </el-select>
          </div>
          <div class="item">
            <el-button style="background: #4065E0; color: #fff " @click="search(tableData)">查询</el-button>
            <el-button plain @click="clearFilter">重置</el-button>
          </div>
      </div>
      
      <div class="start-table">
          <!-- 对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。 -->
        <el-table :data="filteList" border style="width: 100%">
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="image" label="缩略图" width="180">
                <template slot-scope="scope">
                       <img :src="scope.row.image" alt=""> 
                </template>
            </el-table-column>
            <el-table-column prop="url" label="链接">
                <template slot-scope="scope">
                    <a :href="'http://'+scope.row.url" target="_blank" style="color: #4065E0; text-decoration: underline">{{scope.row.url}}</a>
                </template>
            </el-table-column>
            <el-table-column label="上线时间" width="162">
                <template slot-scope="scope">
                   {{ scope.row.startTime | dateFormat('') }} - {{ scope.row.endTime | dateFormat('') }}
                </template>
            </el-table-column>
            <el-table-column prop="isActive" label="状态">
                <template slot-scope="scope">
                    {{ scope.row.isActive ? "启用" : "不启用" }}
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="mini" style="background: #2AB9C6; color: #fff" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleUse(scope.$index, scope.row)" :disabled="isDisabled">设为{{ scope.row.state == '启用' ? '不启用' : '启用' }}</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pageation">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="prev, jumper, slot, next"
                :page-size="pageSize"
                :total="total"
                >
                <span style="text-align: center; color: #606266; font-weight: 400"> / {{ pageCount }} </span>
            </el-pagination>
        </div>
      </div>
      <div>
        
      </div>
    </el-main>
    <router-view></router-view>
  </div>
</template>

<script>
import { getStartup, deleteStartup } from 'api/content/startupController'
export default {
    name: 'Start',  // 1.有且只有一个启动页处于启用状态  2.创建成功的启动页不能修改图片
    data() {
        return {
            keyWord: '',
            isActive: '1',
            tableData: [],
            filteList: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    },
    components: {
        
    },
    watch: {
        // 监听路由变化
        '$route'(to,from){
            // console.log(to.path)
            this.getStartupList()
        }
    },
    computed: {
        pageCount(){
            return Math.ceil(this.total / this.pageSize)
        }
    },
    methods: {
        changeValue(e){
            this.isActive = e.target.value
            console.log(this.isActive)
        },
        // 点击编辑按钮
        handleEdit(index,row){
            // 传递row的信息给detail组件,query/params,query刷新后不会清除参数,params刷新后会清除参数
            this.$router.push({ name: 'Detail', query: { row: row, appId: 'nng0012' } })
        },
        // 表单筛选
        search(dataSouce){
            if(dataSouce){
                var _keyword = this.keyWord
                var status = this.isActive
                this.filteList = dataSouce.filter(item => {
                    if(item.name.indexOf(_keyword) > -1 && item.isActive == status){
                        return item
                    }
                }) 
            }else{
                return
            }
           
        },
        // 删除
        handleDelete(index, row){          
            deleteStartup(row.startupId).then(res => {
                if(res.resultCode == 1){
                    this.$message.success(res.resultMsg)
                    this.filteList.splice(index, 1);
                }else{
                    this.$message.error(res.resultMsg)
                }
            })
        },
        // 重置
        clearFilter(){
            this.keyWord = ''
            this.isActive = '1'
            this.filteList = this.tableData
        },
        // 添加启动页按钮
        addStartPage(){
            // this.addDialogVisible = true
            this.$router.push({ path: '/home/start-page/add-start', query: { appId: 'nng0012', moduleId: 3 } })
        },
        
        // 获取列表数据
        getStartupList(){
            var params = {
                appId: 'nng0011',
                moduleId: 3
            }
            getStartup(params).then(res => {
                console.log(res)
                this.tableData = res.data
                this.filteList = this.tableData
                this.total = res.data.length
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    
    created(){
        this.getStartupList()
    }
};
</script>

<style lang="scss" scoped>
.start-page {
    // height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        // .start-top{
        //     margin-bottom: 0px;
        // }
        .top{
            display: flex;
            justify-content: space-between;
            .item{
                display: flex;
                line-height: 40px;
                span{
                    white-space: nowrap;
                    padding-right: 10px;
                }
            }
        }
        .addStartPage{
            display: flex;
            justify-content: flex-end;
            margin: 10px 0 20px 0;
        }
        .start-table{
            margin-top: 20px;
            img{
                width: 104px;
                height: 70px;
            }
        }
    }
}
.el-dropdown {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
}
.el-dropdown-menu {
    padding: 0;
    margin: 0;
    top: 104px !important;
    left: 210px !important;
}
.el-dropdown-menu__item:not(.is-disabled):hover{
    color: #4065E0;
}
</style>

